<template>
    <div class="add-company">
        <div class="info-item">
            <normal-title title="基本信息" border></normal-title>
            <div class="form-box">
                <div class="form-item">
                    <span class="label">公司名称</span>:
                    <div class="cont">
                        <span>{{companyInfo.name || ''}}</span>
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">审核状态</span>:
                    <div class="cont">
                        <span >{{companyInfo.statusMessage || ''}}</span>
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">组织机构代码</span>:
                    <div class="cont">{{companyInfo.organizingCode || ''}}</div>
                </div>
                <div class="form-item">
                    <span class="label">手机号码</span>:
                    <div class="cont">
                        <span v-if="!isEditer">{{companyInfo.mobile || ''}}</span>
                        <el-input v-else placeholder="请输入手机号" v-model.trim="companyInfo.mobile"></el-input>
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">联系电话</span>:
                    <div class="cont">
                        <span v-if="!isEditer">{{companyInfo.phone || ''}}</span>
                        <el-input v-else placeholder="请输入联系电话" v-model.trim="companyInfo.phone"></el-input>
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">联系人</span>:
                    <div class="cont">
                        <span v-if="!isEditer">{{companyInfo.contacts || ''}}</span>
                        <el-input v-else placeholder="请输入联系人" v-model.trim="companyInfo.contacts"></el-input>
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">企业性质</span>:
                    <div class="cont">
                        {{companyInfo.companyNature && companyInfo.companyNature.name || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">注册来源</span>:
                    <div class="cont">
                        {{companyInfo.sourceMessage || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">区域</span>:
                    <div class="cont">
                        <span v-if="!isEditer">{{`${companyInfo.province && companyInfo.province.name || ''} ${companyInfo.city && companyInfo.city.spell || ''} ${companyInfo.area && companyInfo.area.name || ''}`}}</span>
                        <area-select v-else :area="areaData" @handleChangeGetAll="handleChange"></area-select>
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">绑卡状态</span>:
                    <div class="cont">
                        {{companyInfo.bindBankStatusMessage || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">开户状态</span>:
                    <div class="cont">
                        {{companyInfo.openAccountStatusMessage || ''}}
                    </div>
                </div>
            </div>
         </div>
         <div class="info-item" v-if="companyInfo.salesInvoice || companyInfo.salesAddress">
            <normal-title title="卖家信息" border></normal-title>
            <div class="form-box">
                <div class="form-item">
                    <span class="label">发票抬头</span>:
                    <div class="cont">
                        {{companyInfo.salesInvoice && companyInfo.salesInvoice.name || '' }}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">开户名</span>:
                    <div class="cont">
                        {{companyInfo.salesInvoice && companyInfo.salesInvoice.accountName || '' }}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">开户银行名称</span>:
                    <div class="cont">
                        {{companyInfo.salesInvoice && companyInfo.salesInvoice.bankName || '' }}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">发票税号</span>:
                    <div class="cont">
                        {{companyInfo.salesInvoice && companyInfo.salesInvoice.dutyNo || '' }}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">地址</span>:
                    <div class="cont">
                        <span v-if="!isEditer">
                            {{companyInfo.salesAddress && companyInfo.salesAddress.province && companyInfo.salesAddress.province.name || '' }}
                            {{companyInfo.salesAddress && companyInfo.salesAddress.city && companyInfo.salesAddress.city.spell || '' }}
                            {{companyInfo.salesAddress && companyInfo.salesAddress.area && companyInfo.salesAddress.area.name || '' }}
                        </span>
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">地址创建时间</span>:
                    <div class="cont">
                        {{companyInfo.salesAddress && companyInfo.salesAddress.createTime && $normalTime(companyInfo.salesAddress.createTime) || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">地址审核状态</span>:
                    <div class="cont">
                        {{companyInfo.salesAddress && companyInfo.salesAddress.statusMessage || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">收件人</span>:
                    <div class="cont">
                        {{companyInfo.salesAddress && companyInfo.salesAddress.contacts || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">收件人手机号</span>:
                    <div class="cont">
                        {{companyInfo.salesAddress && companyInfo.salesAddress.phone || ''}}
                    </div>
                </div>
            </div>
         </div>
         <div class="info-item" v-if="companyInfo.licences && companyInfo.licences.length">
            <normal-title title="资质材料" border></normal-title>
            <div class="qualification-materials">
                <div class="materials-item" v-for="(item, i) in companyInfo.licences || []" :key="i" @click="clickImg(item, i)" >
                    <img-upload :disabled="item.status == 2" @uploadSuccess="uploadSuccess" >
                        <div class="img-box">
                                <img :src="item.resource && item.resource.url" alt="">
                            
                        </div>
                      </img-upload>
                     <div class="name">{{item.name || ''}}</div>
                     <!-- <div class="type">{{item.typeName || ''}}</div> -->
                     <div class="status">
                         {{item.statusMessage || ''}}
                     </div>
                </div>
            </div>
        </div>
        <div class="control">
            <template v-if="!isEditer">
                <el-button type="primary" @click="isEditer = true" v-if="companyInfo.status != 2 && companyInfo.status != 1">编辑</el-button>
            </template>
            <template v-else>
                <el-button @click="isEditer = false">取消</el-button>
                <el-button type="primary" @click="save">保存</el-button>
            </template>
        </div>
    </div>
</template>
<script>
import areaSelect from '@/components/xForm/areaSelect'
import { mapGetters } from 'vuex'
export default {
    name: 'addCompany',
    components: {
        areaSelect
    },
    data () {
        return {
            type: 0, // 0 新增 1编辑
            companyInfo: {},
            isEditer: false,
            zzList: [],
            areaData: {
                value: []
            },
            currentImg: {},
            currentImgIndex: 0
        }
    },
    computed: {
        ...mapGetters({
            enumAll: 'common/getEnumAll'
        }),
    },
    created () {
        this.type = this.$route.params.type
        if (this.type == 1) {
            this.getMsg()
        }
        this.zzList = this.enumAll['EnumLicencesType']
    },
    methods: {
        clickImg (item, i) {
            this.currentImg = item
            this.currentImgIndex = i
        },
        uploadSuccess (url, obj) {
            const {size, type} = obj
            let item = {
                size,
                url,
                resourceType: type
            }
            this.companyInfo.licences && this.companyInfo.licences.length && this.$set(this.companyInfo.licences[this.currentImgIndex], 'resource', item)
        },
        handleChange (val) {
            this.companyInfo.province = val.province
            this.companyInfo.province = val.province
        },
        mkDataLicenes (data) {
            const {zzList} = this
            let arr = []
            arr = zzList.map(r => {
                return {
                    type: r.value,
                    name: r.label,
                    status: 0,
                    statusMessage: '待申请',
                    resource: {
                        type: r.value,
                        url: '',
                        size: 0
                    }
                }
            }) || []
            arr.forEach((r, i) => {
                data && data.length && data.forEach((rr) => {
                    if (rr.type == r.type) {
                        arr[i] = rr
                    }
                })
            })
            return arr
        },
        doArea (data) {
            const {province, city, area} = data
            let arr = []
            if (province && city && area) {
                arr = [province.id, city.id, area.id]
            }
            this.areaData = {
                value: arr
            }
        },
        getMsg () {
            this.$loading(true)
            this.$api.userManage.getCompanyDetail({id: this.$route.params.id}).then(r => {
                this.companyInfo = r.data || {}
                this.companyInfo.licences = this.companyInfo.licences && this.companyInfo.licences.length && this.mkDataLicenes(this.$deepCopy(this.companyInfo.licences))
                this.doArea(r.data)
            }).finally(() => {
                this.$loading(false)
            })
        },
        // 保存
        save () {
            let param = {}
            param = Object.assign({}, this.companyInfo)
            this.$api.userManage.putUpdateCompany(param).then(r => {
                this.$message.success(r.message)
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.add-company {
    .info-item {
        width: 100%;
        background: #fff;
        margin-bottom: 16px;
        padding: 0px 10px 10px;
        .form-box {
            box-sizing: border-box;
            width: 100%;
            overflow: hidden;
            .form-item {
                display: flex;
                margin-top: 10px;
                min-height: 36px;
                align-items: center;
                width: 400px;
                float: left;
                &:nth-child(2n+2) {
                    width: calc(100% - 400px);
                }
                .label {
                    width: 100px;
                    text-align-last: justify;
                    font-size: 14px;
                    color: #666;
                }
                .cont {
                    flex: 1;
                    margin-left: 10px;
                    font-size: 14px;
                    .el-input {
                        width: 300px;
                    }
                    .el-select {
                        width: 300px;
                    }
                    
                }
                ::v-deep.cont {
                    .el-select, .el-input {
                        width: 260px;
                    }
                }
            }
        }
        .qualification-materials {
            overflow: hidden;
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            padding: 20px 0 0;
            .materials-item {
                width: 200px;
                box-sizing: border-box;
                padding: 10px;
                font-size: 14px;
                color: #333;
                border: 1px solid #ddd;
                border-radius: 2px;
                margin:0 10px 10px 0;

                .img-box {
                    width: 178px;
                    height: 180px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    overflow: hidden;
                    background: #eee;
                    margin-bottom: 10px;
                    img {
                        max-width: 100%;
                        max-height: 100%;
                    }
                }
                .name,.type,.status {
                    line-height: 20px;
                }
            }
        }
    }
}
</style>